<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global_color.css"/>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="<%=request.getContextPath()%>/admins/exit">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <c:import url="../navigation.jsp"/>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <form action="/role/role_updateOne" method="get" class="main_form">
        <div class="text_info clearfix"><span>角色名称：</span></div>
        <div class="input_info">
            <input type="text" name="roleId" value="${param.roleId}" style="display: none"/>
            <input type="text" name="start" value="${param.start}" style="display: none"/>
            <input type="text" class="width200" name="name" value="${param.name}" />
            <span class="required">*</span>
            <div class="validate_msg_medium error_msg">不能为空，且为20长度的字母、数字和汉字的组合</div>
        </div>
        <div class="text_info clearfix"><span>设置权限：</span></div>
        <div class="input_info_high">
            <div class="input_info_scroll" style="min-height: 120px">
                <ul>
                    <script>
                        $(function () {
                            var a = '${param.moduleName}';
                            var moduleCheckArray = document.getElementsByClassName("module_check");
                            for (var index = 0; index < moduleCheckArray.length; index++){
                                if (a.includes(moduleCheckArray[index].textContent)) {
                                    moduleCheckArray[index].childNodes[0].checked="checked";
                                }
                            }
                        });
                        //全选方法
                        var inputArray = document.getElementsByClassName("li_input");
                        function chooseAll() {
                            for (let i = 0; i < inputArray.length; i++) {
                                inputArray[i].checked=true;
                            }
                        }
                        //反选方法
                        function chooseOpposite() {
                            for (let i = 0; i < inputArray.length; i++) {
                                if (inputArray[i].checked === true){
                                    inputArray[i].checked=false;
                                } else if (inputArray[i].checked === false){
                                    inputArray[i].checked=true;
                                }
                            }
                        }
                    </script>
                    <li class="module_check"><input class="li_input" name="moduleId" value="1" id="1" type="checkbox" /><label for="1">角色管理</label></li>
                    <li class="module_check"><input class="li_input" name="moduleId" value="2" id="2" type="checkbox" /><label for="2">管理员</label></li>
                    <li class="module_check"><input class="li_input" name="moduleId" value="3" id="3" type="checkbox" /><label for="3">资费管理</label></li>
                    <li class="module_check"><input class="li_input" name="moduleId" value="4" id="4" type="checkbox" /><label for="4">账务账号</label></li>
                    <li class="module_check"><input class="li_input" name="moduleId" value="5" id="5" type="checkbox" /><label for="5">业务账号</label></li>
                    <li class="module_check"><input class="li_input" name="moduleId" value="6" id="6" type="checkbox" /><label for="6">账单管理</label></li>
                    <li class="module_check"><input class="li_input" name="moduleId" value="7" id="7" type="checkbox" /><label for="7">报表</label></li>
                    <li></li>
                    <li></li>
                    <li><input type="button" value="全选" style="width: 50px" onclick="chooseAll()"/></li>
                    <li><input type="button" value="反选" style="width: 50px" onclick="chooseOpposite()"/></li>
                </ul>
            </div>
            <span class="required">*</span>
            <div class="validate_msg_tiny">至少选择一个权限</div>
        </div>
        <div class="button_info clearfix" style="position: absolute; top: 200px; left: 300px">
            <input type="submit" value="保存" class="btn_save" />
            <input type="button" value="取消" class="btn_save" onclick="location.href='role_list_all?start=1';"/>
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
    <br />
    <span>版权所有(C)云科技有限公司 </span>
</div>
</body>
</html>
